<template>
    <div class="banding">
        <van-nav-bar :title="$router.currentRoute.name"></van-nav-bar>
        
        <van-cell-group>
            <van-field
                v-model="form.mobile"
                ref="mobile"
                clearable
                label="手机号"
                placeholder="请输入手机号"
            />
            <van-field
                v-model="form.smsCode"
                center
                clearable
                label="手机验证码"
                placeholder="请输入验证码"
            >
                <van-button slot="button" size="small" type="primary" :disabled="canGetSMSValidCode" :text="codeText" @click="getSMSValidCodeHandler"></van-button>
            </van-field>
        </van-cell-group>


        <van-row type="flex" justify="center">
            <van-col span="22" style="margin-top: 20px;">
                <van-button type="primary" style="width: 100%;" @click="checkSMSValidCodeHandler">完成绑定</van-button>
            </van-col>
        </van-row>
        

    </div>
</template>

<script>
    import { NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Field, Button } from 'vant'
    import { sendSMSValidCode, checkSMSValidCode, bandingMobile } from '@/api/User/'
    import { validateMobile, validateNull } from '@/libs/validate'
    import { setCache, getCache } from '@/libs/cache'
    import store from '@/store'
    import { mapGetters } from 'vuex'

    export default {
        name: 'Banding',
        components: {
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Field.name]: Field,
            [Button.name]: Button,
        },
        data() {
            return {
                form: {
                    openid: null,
                    mobile: '15602208451',
                    smsCode: null
                },
                canGetSMSValidCode: false,
                codeText: '获取验证码'
            }
        },
        computed: {
            ...mapGetters(['userinfo'])
        },
        created() {
            if(this.userinfo && this.userinfo.mobile) { //如果以绑定手机号，则直接跳转到首页
                 this.$router.push({path: '/'})
                return
            }
        },
        methods: {
            getSMSValidCodeHandler() {
                const checkMobile = validateMobile(this.form.mobile)
                if(checkMobile[0]) {
                    Toast(checkMobile[1])
                    return
                }

                this.canGetSMSValidCode = true
                this.codeText = '60s'

                let timeLast = 2
                let timer = setInterval(() => {
                    if (timeLast >= 0) {
                        this.codeText = timeLast + 's';
                        timeLast -= 1;
                    } else {
                        clearInterval(timer);
                        this.codeText = '获取验证码';
                        this.canGetSMSValidCode = false;
                    }
                }, 1000)

                sendSMSValidCode({'mobile': this.form.mobile}).then((response) => {
                    if(response.data.status === 200) {
                        Toast('短信已发送')
                    } else {
                        Toast('短信发送失败')
                    }
                })
            },

            checkSMSValidCodeHandler() {
                const checkMobile = validateMobile(this.form.mobile)
                const checkSmsCode = validateNull(this.form.smsCode)
                if(checkMobile[0]) {
                    Toast(checkMobile[1])
                    return
                }
                if(checkSmsCode) {
                    Toast('验证码不能为空')
                    return
                }
                checkSMSValidCode({'mobile': this.form.mobile, 'smsCode': this.form.smsCode}).then(response => {
                    let self = this
                    if(response.data.status !== 200) {
                        Toast(response.data.msg)
                    } else {
                        bandingMobile({'openid': self.userinfo.openid, 'mobile': self.form.mobile}).then(rs => {
                            if(rs.data.status !== 200) {
                                Toast(rs.data.data.msg)
                            } else {
                                Toast('绑定成功')
                                //重新获取用户信息
                                store.dispatch("GetUserInfo", self.userinfo.openid)
                                this.$router.push({path: '/'})
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    
</style>